<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品添加</el-breadcrumb-item>
      <el-breadcrumb-item>上架商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-alert title="添加小米商品" type="info" center show-icon :closable="false"></el-alert>
      <!-- 步进器 -->
      <el-steps :space="200" :active="activeIndex - 0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="添加图片"></el-step>
        <el-step title="参数设置"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
      <!-- 对应的选项添加 -->
      <el-form :model="addForm" :rules="rulesForm" ref="ruleForm">
        <!-- 基本信息添加 -->
        <!-- 用来包裹每一项添加 -->
        <el-tabs :tab-position="'left'" v-model="activeIndex" :before-leave="beforeTabLeave">
          <!-- 商品信息添加 -->
          <el-tab-pane label="商品信息" name="0" :class="activeIndex == '0' ? 'is-active' : ''">
            <el-form-item label="商品名称" prop="title">
              <el-input v-model="addForm.title"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
              <el-input v-model="addForm.price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品库存" prop="num">
              <el-input v-model="addForm.num" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品类型" required prop="type">
              <!-- <el-input v-model="addForm.type" type="select"></el-input> -->
              <el-select v-model="addForm.type" placeholder="请选择商品类型" style="width:300px;" prop="types">
                <el-option label="手机" value="1"></el-option>
                <el-option label="电视" value="2"></el-option>
                <el-option label="笔记本" value="3"></el-option>
                <el-option label="家电" value="4"></el-option>
                <el-option label="路由器" value="5"></el-option>
                <el-option label="电源" value="6"></el-option>
                <el-option label="健康" value="7"></el-option>
                <el-option label="耳机" value="8"></el-option>
                <el-option label="箱包" value="9"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发货地址" prop="addres">
              <el-cascader ref="valuesRef" v-model="addForm.addres" :options="city" :props="{ expandTrigger: 'hover' }" @change="handleChange" :clearable="true" style="width:300px;"></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <!-- 图片添加 -->
          <el-tab-pane label="添加图片" name="1" :class="{ 'is-active': yxs }">
            <!-- mini图片 -->
            <el-form-item label="商品附图(0~1)张">
              <el-upload action="/img/" list-type="picture-card" :limit="1" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="handles">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
            </el-form-item>
            <el-form-item label="商品大图(0~5)张">
              <el-upload action="/img/" :limit="5" list-type="picture-card" :on-preview="handlePictureCardPreview11" :on-remove="handleRemove1" :on-success="handles1">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible1">
                <img width="100%" :src="dialogImageUrl1" alt />
              </el-dialog>
            </el-form-item>
          </el-tab-pane>
          <!-- 参数设置 -->
          <el-tab-pane label="参数设置" name="2">
            <el-form-item style="width:550px;">
              <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
                {{ tag }}
              </el-tag>
              <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" style="width:90px;">
              </el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div>
        <el-button type="primary" @click="down" v-if="c == 3 ? false : true">下一步</el-button>
        <el-button type="primary" @click="addGet" v-else>提交</el-button>
        <el-button type="primary" @click="up" v-if="c == 0 ? false : true">上一步</el-button>
        <el-button type="primary" @click="add">校验</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import city from './citydata.js'
export default {
  inject: ['reload'],
  data() {
    // var checkAge = (rule, value, callback) => {
    //     console.log(rule, value);
    //     if (!value) {
    //         console.log("没到这李吗");
    //         return callback(new Error("年龄不能为空"));
    //     }
    //     setTimeout(() => {
    //         if (!Number.isInteger(value)) {
    //             callback(new Error("请输入数字值"));
    //         } else {
    //             if (value < 18) {
    //                 callback(new Error("必须年满18岁"));
    //             } else {
    //                 callback();
    //             }
    //         }
    //     }, 1000);
    // };
    return {
      c: 0,
      yxs: true,
      activeIndex: '0',
      addForm: {
        title: '',
        price: '',
        num: '',
        type: '',
        img: '',
        url: '',
        addres: '',
        tiem: '',
        tit: ''
      },
      city,
      dialogVisible: false, // 商品mini图显示
      dialogImageUrl: '', // 商品mini图地址
      dialogVisible1: false, // 商品大图显示
      dialogImageUrl1: '', // 商品大图地址
      types: '',
      // 商品信息校验规则
      rulesForm: {
        title: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '请输入商品价格',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '选择商品类型',
            trigger: 'change'
          }
        ],
        num: [
          {
            required: true,
            message: '请输入商品库存',
            trigger: 'blur'
          }
        ],
        addres: [
          {
            required: true,
            message: '请选择省市区',
            trigger: 'blur'
          }
        ]
      },
      dynamicTags: [],
      inputVisible: false,
      inputValue: ''
    }
  },
  created() {
    this.times()
  },
  methods: {
    beforeTabLeave(activeName, oldActiveName) {
      // console.log(this)
      console.log(activeName, oldActiveName)
      if (oldActiveName === '0' && this.addForm.type === '') {
        this.$message.warning('请选择商品类型')
        this.up()
        return false
      }
    },
    // 商品mini预览
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImageUrl = file.url
    },
    // 商品mini移除事件
    handleRemove() { },
    // 商品Mini上传事件
    handles(file) {
      this.addForm.img = file.data + ','
    },
    // 商品大图预览
    handlePictureCardPreview11(file) {
      this.dialogVisible1 = true
      this.dialogImageUrl1 = file.url
    },
    // 商品大图移除事件
    handleRemove1() { },
    // 商品大图上传事件
    handles1(file) {
      this.addForm.url = file.data + ','
    },
    // 省市区
    handleChange(val) {
      console.log(val)
      this.addForm.addres = this.addForm.addres.join(',')
      console.log(this.addForm.addres)
    },
    add() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
      })
    },
    // 监听tag标签的删除事件
    handleClose(tag) {
      //  console.log(this.dynamicTags)
      //  console.log("没有数据？");
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)

      // console.log((this.types = this.dynamicTags.join(",") + ""));
    },
    // input输入框事件
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 新增tag标签的事件
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
      this.addForm.tit = this.dynamicTags.join(',')
      console.log(this.dynamicTags)
    },
    down() {
      if (this.c === 3) return
      this.c++
      console.log(this.c, 'c')
      this.activeIndex = '' + this.c
    },
    up() {
      if (this.c === 0) return
      this.c--
      this.activeIndex = '' + this.c
    },
    // 提交事件
    addGet() {
      // this.$refs.ruleForm.validate(valid => {
      //         if(!valid){
      //             this.activeIndex="0"
      //           return  this.$message.warning('您有必选项未填')
      //         }
      //     this.$http.post('/goods/milei',this.addForm).then(res=>{
      //         console.log(res)
      //     })
      //     })
      console.log(this.addForm)
      this.$refs.ruleForm.validate(valid => {
        if (!valid) {
          this.activeIndex = '0'

          return this.$message.warning('您有必选项未填')
        }
        this.addForm.tiem = this.times()
        this.$http.post('/goods/milei', this.addForm).then(res => {
          console.log(res)
          if (res.data.err_code === 0) {
            this.$message.success('添加成功')
            this.reload()
            this.$refs.ruleForm.resetFields()
            this.activeIndex = '0'
            // this.$router.push('/gettype')
          }
        })
      })

      // this.reload();
      // this.times();
    },
    times() {
      const dt = new Date(+new Date())
      const y = dt.getFullYear()
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')
      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      console.log(`${y}-${m}-${d} ${hh}-${mm}-${ss}`)
      return `${y}-${m}-${d} ${hh}-${mm}-${ss}`
    }
  },
  computed: {},
  watch: {
    c(val) {
      console.log(this.c, 'c的值')
      this.c = val
    }
  }
}
</script>
<style lang="less" scoped>
.el-form-item {
  width: 500px;
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  .el-input {
    width: 300px;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
